<template>
	<view class='home-container'>
		<view class="mask" v-if='showMoremask'>
			<view class="tips_join" style="position:relative">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/images/tip.png" style="width:40rpx;height:40rpx" mode=""></image>
					<text style="font-size: 16px;font-weight: bold;margin-left: 10rpx;color: #FF5310;">温馨提示</text>
				</view>

				<view class="" style='position:absolute;right:18rpx;top:20rpx;display:flex;font-size:24rpx'>
					<!-- <view class="" @click="addSymptom">
						填写症状
					</view> -->
					<view class="" style="margin-left:50rpx">
						<image src="../../static/images/x.png" mode="" style="width:40rpx;height:40rpx"
							@click='showMoremask=false'></image>
					</view>
				</view>
			</view>
			<view class="content" style="height: 500rpx;overflow: auto;width:100%;color:#0052d9">

				<view v-for="(ele,idx) in msgList" :key='idx'
					style="display: flex;align-items: center;justify-content: space-between;margin-top:12rpx" :class="{
						            'jiayi': ele.message.includes('加衣'),
						            'jianyi': ele.message.includes('减衣'),
						            'yichang': ele.message.includes('异常'),
						            'chuhan': ele.message.includes('出汗'),
									'dianliang': ele.message.includes('电量')
						        }">
					<view class="timer" style="display: flex;align-items: center;">

						<view class="" style="width:100rpx">
							{{ele.createTime.substring(11,ele.createTime.length-3)}}
						</view>
						<view v-if="ele.message.includes('电量')" class="" style="margin-left:80rpx;width:100rpx;">
							{{ ele.updateBy}}%
						</view>
						<view v-else class="" style="margin-left:80rpx;width:100rpx;">
							{{ Number(ele.updateBy).toFixed(1)}}℃
						</view>
					</view>
					<view class="" style='font-size:14px'>
						{{ele.message}}
					</view>
				</view>
			</view>


		</view>
		<view class="top-main">
			<view class="header">
				<image src="../../static/images/default_avatar.jpg" mode="" class="avatar"></image>
				<view class="name-switch">
					<view class="name">
						知冷暖宝宝
					</view>
					<view class="switch">
						切换
					</view>
				</view>

			</view>
			<view class="set-content">
				<view class="set-list">
					<!-- <image src="" class="set-icon"></image> -->
					<u-icon name="wifi" color="#596FE8" size="40"></u-icon>
					<view class="set-name">
						ZLN-M03
					</view>
				</view>
				<!-- 		<view class="set-list">
			
					<u-icon name="wifi" color="#596FE8" size="40"></u-icon>
					<view class="set-name">
						电量：100
					</view>
				</view> -->
				<view class="set-list">
					<!-- <image src="" class="set-icon"></image> -->
					<u-icon name="wifi" size="40"></u-icon>
					<view class="set-name">
						在线
					</view>
				</view>
				<view class="set-list">
					<!-- <image src="" class="set-icon"></image> -->
						<u-icon name="volume-off" color="#596FE8" v-show="!showUpImg" @click="changeImg" size="40"></u-icon>
					<view class="set-name">
						静音
					</view>
				</view>
			</view>
		</view>

		<view class="sports-info-content" @click='goActivity'>
			<view class="info-title">
				<view class="">
					今日总运动1小时30分
				</view>
				<view class="">
					距目标还差0小时40分钟
				</view>
			</view>
			<view class="sports-type-content">
				<view class="list">
					<view class="bg-title">
						<view class="bg" style="background-color: #4CD964;">

						</view>
						<view class="title">
							轻活动（慢走）
						</view>
					</view>
					<view class="timer">
						0小时10分
					</view>

				</view>
				<view class="list">
					<view class="bg-title">
						<view class="bg" style="background-color: green;">

						</view>
						<view class="title">
							低强度（慢走）
						</view>
					</view>
					<view class="timer">
						0小时10分
					</view>

				</view>
				<view class="list">
					<view class="bg-title">
						<view class="bg">

						</view>
						<view class="title">
							中强度（慢走）
						</view>
					</view>
					<view class="timer">
						0小时10分
					</view>

				</view>
				<view class="list">
					<view class="bg-title">
						<view class="bg" style="background-color: orange;">

						</view>
						<view class="title">
							高强度（慢走）
						</view>
					</view>
					<view class="timer">
						0小时10分
					</view>

				</view>
				<view class="list">
					<view class="bg-title">
						<view class="bg" style="background-color: red;">

						</view>
						<view class="title">
							剧烈动（慢走）
						</view>
					</view>
					<view class="timer">
						0小时10分
					</view>

				</view>
			</view>
		</view>
		<view class="echarts-wrap" style="width:100%;height:600rpx;margin-top:25rpx"
			v-show='temperature||temperature===0'>
			<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec">
			</uni-ec-canvas>


		</view>
		<view class="container" v-if='!temperature&&temperature!==0'>



			<view class="percentage">

				<view class="temp" :style="{color: chartColor}">暂无当天数据</view>

			</view>
		</view>
		<!-- 提示	 -->
		<view class="Tips">
			<view class="tips_join" style="position:relative">
				<view class="" v-if='showTips'
					style="padding:20rpx 18rpx;color:#999;font-size:26rpx;text-align:left;position:absolute;right:50rpx;width:400rpx;height:140rpx;border-radius: 5rpx;background: #fff;z-index:999;box-shadow: 0px 0px 15rpx 15rpx #f1f1f1;margin-top:46rpx">
					<view class="">
						A.温度小于32，提示加衣；
					</view>
					<view class="">
						B.温度小于37，提示减衣；
					</view>
					<view class="">
						C.温湿大于90，提示换内衣；
					</view>
				</view>
				<!-- 	<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/briefing.png" mode=""></image> -->
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/images/tip.png" style="width:40rpx;height:40rpx" mode=""></image>
						<text style="font-size: 16px;font-weight: bold;margin-left: 10rpx;color: #FF5310;"
							>温馨提示</text>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="" @click='buy' style='font-size:32rpx'>
							如何购买
						</view>
						<view class="" @click="getMsgList" style='font-size:32rpx;margin-left:20rpx'>
							查看更多
						</view>
					</view>
				</view>

				<view v-if="timeOutTips" class="" style='margin-top:36rpx;color:1890ff;font-size:46rpx'>
					{{timeOutTips}}
				</view>
				<view v-if="!timeOutTips&&temperature&&temperature<=31&&humidity<90" class=""
					style='margin-top:36rpx;color:1890ff;font-size:46rpx;color:#2397ee'>
					宝贝体表温度偏低,请酌情加衣</view>
				<view v-if="!timeOutTips&&temperature&&temperature>=37&&humidity<90" class=""
					style='margin-top:36rpx;color:1890ff;font-size:46rpx;color:#f91d14'>宝贝体表温度偏高,请酌情减衣
				</view>
				<view v-if="!timeOutTips&&temperature&&temperature<37&&temperature>31&&humidity<90" class=""
					style='margin-top:36rpx;color:1890ff;font-size:46rpx;color:#16af19'>体表温度正常
				</view>
				<view v-if="humidity>90&&!timeOutTips&&temperature<37&&temperature>31" class=""
					style='margin-top:36rpx;color:1890ff;font-size:46rpx;color:#f91d14'>
					宝贝可能出汗，请酌情更换内衣
				</view>

				<view class=""
					style="font-size:26rpx;color:#999;position: absolute;bottom:16rpx;left:180rpx;margin-top:10rpx">
					如实际情况不符，请忽略此次提醒。
				</view>
				<view class="" style='position:absolute;right:18rpx;top:12rpx;display:flex;font-size:28rpx'>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'


	export default {
		data() {
			return {
				msgList: [],
				timeOutTips: '',
				isOnline: false,
				showTips: false,
				showMoremask: false,
				humidity: '',
				iscd: null,
				waterData: '',
				quantity: '未知', //剩余电量
				temperature: '', //温度值
				chartColor: '', //图表颜色
				showUpImg: true,
				name: '宝宝',
				min: 1,
				showUp: true,
				model: 'X001',
				lasttime: '',
				headurl: 'https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/portrait.png',
				status: 0,
				maxtemp: 0,
				mintemp: 0,
				avgtemp: 0,
				maxt: 0,
				mint: 0,
				deviceInfo: {},
				scene: '',
				query: '',
				temperature: '', //温度值
				ec: {
					lazyLoad: true,
					option: {
						series: [{
								type: 'gauge',
								hoverAnimation: false,
								center: ['50%', '54%'],
								radius: '105%',
								// startAngle: 225,
								// endAngle: 16,
								min: 23,
								max: 43,
								axisLine: {
									lineStyle: {
										width: 25,
										color: [
											[0.333, '#2397ee'],
											[0.666, '#16af19'],
											[1, '#f91d14']
										]
									}
								},
								pointer: {
									show: false,
									itemStyle: {
										color: 'auto'
									}
								},
								axisTick: {
									distance: -30,
									length: 14,
									splitNumber: 2,
									lineStyle: {
										color: '#fff',
										width: 2,

									}
								},
								splitLine: {
									distance: -30,
									length: 30,
									lineStyle: {
										color: '#fff',
										width: 1
									}
								},
								axisLabel: {
									color: 'auto',
									distance: 40,
									fontSize: 15
								},
								detail: {
									fontSize: 58,
									offsetCenter: [0, '20%'],
									valueAnimation: true,
									formatter: ['{value}℃', '{a|无汗}'].join('\n'),
									padding: [-80, 0, 0, 0],
									rich: {
										a: {
											color: '#16af19',
											fontSize: 42,
											fontWeight: 'bold',
											padding: [70, 0, 10, 0],

										},
										b: {
											color: '#16af19',
											fontSize: 38,
											fontWeight: 'bold',
											padding: [90, 0, 10, 0],
										}
									},
									color: 'auto'
								},
								data: [{
									value: 60
								}]
							},
							{
								//内圆
								type: 'pie',
								radius: '0%',
								silent: false,
								center: ['50%', '50%'],
								z: 0,
								itemStyle: {
									normal: {
										color: new echarts.graphic.RadialGradient(
											0.5,
											0.5,
											1,
											[{
													offset: 0,
													color: 'rgba(17,24,43,0)'
												},
												{
													offset: 0.5,
													// color: '#1E2B57'
													color: 'rgba(28,42,91,.6)'
												},
												{
													offset: 1,
													color: '#141C33'
													// color:'rgba(17,24,43,0)'
												}
											],
											false
										),
										label: {
											show: false
										},
										labelLine: {
											show: false
										}
									}
								},
								hoverAnimation: false,
								label: {
									show: false
								},
								tooltip: {
									show: false
								},
								data: [100]
							},
							{
								tooltip: {
									show: false
								},
								name: 'wrap',
								z: 1,
								type: 'pie',
								hoverAnimation: false,
								legendHoverLink: false,
								center: ['50%', '80%'],
								radius: ['0%', '90%'],
								startAngle: 0,
								label: {
									normal: {
										show: false,
										position: 'center'
									},
									emphasis: {
										show: false
									}
								},
								labelLine: {
									normal: {
										show: false
									}
								},
								data: [{
										value: 50,
										itemStyle: {
											normal: {
												color: '#fff'
											},
											emphasis: {
												color: '#fff'
											}
										}
									},
									{
										value: 50,
										name: '1',
										itemStyle: {
											normal: {
												color: 'transparent'
											}
										}
									}
								]
							}
						]
					}


				},
			}
		},
		onReady() {

			setTimeout(() => {
				console.log(this)
				console.log(this.$refs)
				this.$refs['canvas'].init()
				console.log('延迟加载了')
			}, 1000) // 两秒之后延迟加载  

			// setTimeout(() => {
			//this.ec.option.series[0].data = [120, 132, 101, 134, 90, 230, 210]  
			// this.ec.option.xAxis[0].data = [1,2,3,4,5,6,7]  
			// 如果是data数组内的数据 记得用$set  
			// 	console.log('数据更改了')
			// }, 2000)
		},
		onLoad(options) {
			this.getTimer()
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
			if (options.q) {
				let q = decodeURIComponent(options.q);
				const tid = this.getQueryString(q, 'tid');
				console.log(tid, 11);
				const code = this.getQueryString(q, 'code');
				const postId = this.getQueryString(q, 'hbid')
				const artileId = this.getQueryString(q, 'wzid')
				const developer = this.getQueryString(q, 'developer')
				console.log(code, 22);
				if (code) {
					uni.navigateTo({
						url: '/pages/login/login?code=' + code
					})
					// uni.navigateTo({
					// 	url: '/pages/login/binding/device/device?code=' + code
					// })
				} else if (developer) {
					uni.navigateTo({
						url: '/pages/login/login?postId=' + postId + '&artileId=' + artileId + '&developer=' +
							developer
					})
				} else if (postId && artileId) {
					uni.navigateTo({
						url: '/pages/login/login?postId=' + postId + '&artileId=' + artileId
					})
				} else if (artileId) {
					uni.navigateTo({
						url: '/pages/login/login?artileId=' + artileId
					})
				} else if (postId) {
					uni.navigateTo({
						url: '/pages/login/login?postId=' + postId
					})
				}
			} else {
				let zwxphone = uni.getStorageSync('zwxphone');
				let _this = this;
				if (!zwxphone) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					console.log(uni.getStorageSync('loginPageRedic'), 11)
					// this.getSweat()
					this.lastDeviceInfo();
					this.times(); //加载定时任务
				}
			}
			// this.scene = scene
			// this.query = query.toString()
			//类型为string，所以只能判断不叫"undefined"
			//console.log(typeof(scene));
			// if (scene != "undefined" && scene.length > 4) {
			// 	console.log(scene);
			// 	uni.showModal({
			// 		content: '证书编码:' + scene + '，点击查询查看详情',
			// 		showCancel: false
			// 	});
			// 	this.certNumber = scene;
			// } else {
			// 	console.log("没有启动参数");
			// 	// this.lastDeviceInfo();
			// }

		},
		methods: {
			goActivity() {
				uni.navigateTo({
					url: '/pages/index/activity/activity'
				})
			},
			buy() {
				uni.showModal({
					title: '知冷暖',
					content: '前往淘宝店铺-知冷暖健康或淘宝直接搜索知冷暖幼儿购买',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							console.log(1111)
			
							
							uni.navigateTo({
								url: '/pages/index/webview/webview'
							})
						}
					}
				})
			},
			getMsgList() {
			
				this.$api.getMsgList({
					deviceCode: this.deviceInfo.device_code
				}).then(res => {
					if (res.code === 200) {
						this.showMoremask = true
						const list = res.result.list
						const arr = []
						if(list.length){
							list.forEach(ele=>{
								if(ele.updateBy!=='0.0')
								{
									arr.push(ele)
								}
							})
						}
						this.msgList = arr
					}
				})
			},
			getSweat(humidity) {
				this.$api.getDeviceList().then(res => {
					let list = []
					if (res.code === 200) {
						list = res.result.list
						if (!list.length) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
							return
						}
						list.forEach(ele => {
							if (ele.deviceStatus === 'Y') {
								this.deviceInfo = ele
								if (humidity) {
									this.$api.searchDeviceSweat({
										deviceNo: ele.code
									}).then(response => {
										if (response.code === 200) {
											console.log(humidity, 9958)
											this.$refs['canvas'].init()
											this.ec.option.series[0].detail.formatter = [
												'{value}℃', `{a|${response.message}}`,
												`{b|${humidity}%}`
											].join('\n')
											if (response.message !== '无汗') {
												this.ec.option.series[0].detail.rich.a.value = '11'
												this.ec.option.series[0].detail.rich.a.color =
													'#f91d14'
												this.ec.option.series[0].detail.rich.b.color =
													'#f91d14'
											}
										}
									})
								}
							}
						})
					}
				})
			},
			onPullDownRefresh() {
				console.log(119)
				this.lastDeviceInfo()
			},
			getQueryString(url, name) {
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			getTimer() {
				var myDate = new Date();
				var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				var myToday = myDate.getDate(); //获取当前日(1-31)
				var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
				var myHour = myDate.getHours(); //获取当前小时数(0-23)
				var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
				var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
				if (myHour < 10) {
					myHour = `0${myHour}`
				}

				if (myMinute < 10) {
					myMinute = `0${myMinute}`
				}
				this.lasttime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' +
					myHour + ':' + myMinute
			},
			async lastDeviceInfo() {
				// let tpl_param = {
				// 	pageId: "f945d0c61ab6457b89ac05e035bb4d39"
				// };
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.lastDeviceInfo();
				console.info(res);
				// if(res.status != undefined && res.status==500)
				// {
				// 	uni.reLaunch({
				// 		url: '/pages/login/login'
				// 	});
				// }else	
				wx.stopPullDownRefresh()
				if (res.code == 200) {
					// console.log(res);
					this.name = res.result.name;
					this.quantity = res.result.quantity;
					this.lasttime = res.result.lasttime;
					this.temperature = res.result.temperature;
					this.min = res.result.min;
					this.showUpImg = res.result.showUpImg;
					this.showUp = res.result.showUp;
					this.model = res.result.model;
					this.status = res.result.status;
					this.mintemp = res.result.mintemp;
					this.avgtemp = res.result.avgtemp;
					this.maxt = res.result.maxt;
					this.mint = res.result.mint;
					this.waterData = res.result.waterData
					this.humidity = res.result.humidity

					// this.animation(this.temperature);

					this.ec.option.series[0].data[0].value = this.temperature.toFixed(1)
					// this.ec.option.series[0].formatter = ['{value}℃', '{a|当前温度}'].join('\n')

					// this.ec.option.series[0].detail.formatter = ['{value}℃', `{a|${this.waterData}}`].join('\n')
					// if (this.waterData === '有汗') {
					// 	this.ec.option.series[0].detail.rich.a.color = '#f91d14'
					// }
					this.getSweat(res.result.humidity)
					const now = new Date().getTime()
					const timer = Date.parse(this.lasttime)
					if (now - timer > 3600000) {
						this.timeOutTips = '设备好像不在工作，请检查！'
						this.isOnline = false
						this.quantity = '未知'
						this.ec.option.series[0].detail.color = 'grey'


					} else if (now - timer > 1200000) {
						this.timeOutTips = '设备网络状态不好，请检查！'
						this.isOnline = false
						this.quantity = '未知'
						this.ec.option.series[0].detail.color = 'grey'
					} else {
						this.isOnline = true
						this.timeOutTips = ''
						this.quantity = res.result.quantity
						this.ec.option.series[0].detail.color = 'auto'
						if (res.result.iscd && res.result.iscd != 0 && res.result.iscd != 1) {
							if (res.result.iscd == 2) {
								this.timeOutTips = '充电中'
								this.quantity = res.result.quantity;
							} else if (res.result.iscd == 3 && this.temperature == 0) {
								this.timeOutTips = '电量已充满'
								this.quantity = res.result.quantity;
							}
						}
					}
					console.log(now, 11, timer)



				} else {
					this.getSweat()
					if (this.deviceInfo.status === '1') {
						this.isOnline = '在线'
					}


					// uni.showModal({
					// 	title: '获取设备信息',
					// 	content: res.message || '获取最后一次数据失败',
					// 	showCancel: false
					// });

				}
				uni.hideLoading();

				//this.animation(this.temperature)
			},
			animation(temperature) {
				const query = uni.createSelectorQuery()

				let color = '';
				console.info(temperature + '  ' + this.mint + ' ' + this.maxt);
				if (temperature >= this.mint && temperature <= this.maxt) {
					//绿色
					color = '#008000';
				} else if (temperature < this.mint) {
					//蓝色
					color = 'rgb(67,91,221)';
				} else {
					//红色
					color = '#FF0000';
				}
				this.chartColor = color
				query.select('#firstCanvas')
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						const canvas = res[0].node
						let ctx = canvas.getContext('2d')
						let obj = {
							width: 300,
							height: 300,
							dx: 20, // 刻度宽度
							dy: 2, // 刻度高度
							num: 60, // 刻度条数
							r: 110, // 半径
							start: -90, // 开始角度，与结束角度相对称
							progress: Math.floor(temperature * 100 / 55 + 25 * 100 / 60), // 显示进度 （单位百分比）
							index: 25, // 开始刻度
							defaultColor: '#dee1e4', // 开始颜色
							activeColor: color // 进度条颜色
						};
						this.process = obj.progress
						obj.deg = (180 - 2 * obj.start) / obj.num;
						canvas.width = obj.width;
						canvas.height = obj.height;

						for (var x = 0; x < obj.num; x++) { //灰色刻度线
							draw(x, obj.defaultColor);
						}

						function draw(x, color) { // 画出环形刻度线
							ctx.save();
							var deg = Math.PI / 180 * (obj.start + obj.deg * x); // 角度换算弧度
							var offsetY = -(Math.sin(deg) * obj.r); // 计算刻度Y轴位置
							var offsetX = -(Math.cos(deg) * obj.r); // 计算刻度X轴位置
							ctx.fillStyle = color;
							ctx.translate(obj.width / 2 - offsetX, obj.height / 2 - offsetY); // 修改画布坐标原点
							ctx.rotate(deg); // 旋转刻度
							ctx.fillRect(0, 0, obj.dx, obj.dy); // 画出刻度
							ctx.restore();
						}

						function animate(s, time) {
							if (obj.progress == 0) { // 进度为0直接退出函数
								return false;
							}
							draw(s, obj.activeColor);

							var num = obj.progress * (obj.num / 100); //格数计算

							var timmer = setTimeout(function() {
								obj.index = s + 1;

								if (s >= num) {
									clearTimeout(timmer);
								} else {
									if (s > num - 10) { // 剩余10格动画减速
										animate(obj.index, time + 20);
									} else {
										animate(obj.index, time);
									}

								}
							}, time)
						}
						animate(obj.index, 10)
					})
			},
			times() { //定义了一个times()方法来执行定时查询findDB()
				return setInterval(() => { //setInterval换个名字就行了
					this.lastDeviceInfo()
					// uni.reLaunch({
					// 	url: '../index/index'
					// })
				}, 60000 * 5); //设置时间，这里是1分钟
			}




		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '邀请您使用知冷暖幼儿穿衣宝！', //分享的名称
				path: '/pages/index/index',
				mpId: 'wxa6957e2a04b35cb3' //此处配置微信小程序的AppId
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '邀请您使用知冷暖幼儿穿衣宝！',
				type: 0,
				summary: "",
			}
		},
		destroyed() {
			clearInterval(this.times) //退出页面后销毁定时方法
		},
	}
</script>

<style scoped lang='scss'>
	.mask {
		position: fixed;
		z-index: 166;
		margin: 15rpx 15rpx;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
		bottom: 70rpx;
		background: #F6F7FB;
		border-radius: 6rpx;
		height: 666rpx;
		width: 720rpx;
	}

	.jiayi {
		color: #2397ee;
	}

	.dianliang {
		color: #16af19;
	}

	.chuhan {
		color: orange;
	}

	.jianyi {
		color: #f91d14
	}

	.yichang {
		color: grey
	}

	.home-container {
		width: 100%;
		background-color: #F1F1F1;
		padding: 108rpx 26rpx;
		box-sizing: border-box;
		height: 100%;

		.top-main {
			width: 100%;
			height: 240rpx;
			border-radius: 5rpx;
			background: #fff;
			padding: 16rpx 32rpx;
			box-sizing: border-box;

			.header {
				display: flex;
				align-items: center;

				.avatar {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;

				}

				.name-switch {
					display: flex;

					.name {
						font-size: 16px;
						color: #000;
						margin-left: 12rpx;

					}

					.switch {
						margin-left: 16rpx;
						margin-top: 8rpx;
						color: #999;
					}
				}

			}

			.set-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;

				.set-list {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.set-name {
						font-size: 12px;
						color: #999;
					}
				}
			}
		}

		.sports-info-content {
			width: 100%;
			height: 600rpx;
			border-radius: 5rpx;
			background: #fff;
			padding: 28rpx 52rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.info-title {
				font-size: 17px;
				color: #333;
			}

			.sports-type-content {
				width: 100%;

				.list {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;

					.bg-title {
						display: flex;
						align-items: center;

						.bg {
							width: 26rpx;
							height: 26rpx;
							background-color: yellow;
						}

						.title {
							color: #999;
							margin-left: 16rpx;
						}
					}

					.timer {
						color: #999;
					}
				}
			}

		}
	}

	.container {
		text-align: center;
		width: 100%;
		height: 280px;
		background: #fff;
		position: relative;
		margin-top: 22rpx;

		.percentage {
			color: #666;
			margin-top: 20rpx;
			text-align: center;
			font-size: 30rpx;
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	
	.Tips {
		display: flex;
		margin: 20rpx;
		margin-top: 50rpx;
	}
	
	.Tips>view {
		height: 250rpx;
		background-color: #F6F7FB;
		border-radius: 30rpx;
	
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}
	

	.tips_join {
		flex: 1;
		padding: 20rpx;
	}
	
	.tips_join>image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.tips_join>view {
		// margin-top: 10rpx;
		text-align: center;
		font-size: 16px;
		color: #253DC2;
	}
	
	.tips_join>text {
		font-size: 16px;
		font-weight: bold;
		margin-left: 10rpx;
		color: #FF5310;
	}
</style>
